<template>
	<zh-col
		:span="value ? 24 : span"
		:md="md"
		:sm="sm"
		:xs="xs"
		:lg="lg"
		:xl="xl"
		:offset="offset"
		:push="push"
		:pull="pull"
		:tag="tag"
	>
		<span class="table-page-search-submitButtons" :style="{ float: 'right', overflow: 'hidden' }">
			<slot />
			<zh-button :disabled="getDisabled()" buttonType="query" icon="" :formRef="formRef" :tableRef="tableRef" :data="queryParam" @click="queryBtn">
				查询
			</zh-button>
			<zh-button :disabled="getDisabled()" v-if="props.showReset" buttonType="reset" icon="" :formRef="formRef" :tableRef="tableRef" @click="clearBtn"></zh-button>
			<el-link v-if="showAdvanced" type="primary" @click="toggleAdvanced" style="margin-left: 8px">
				{{ value ? '收起' : '展开' }}
				<el-icon v-if="value"><ele-ArrowUp /></el-icon>
				<el-icon v-else><ele-ArrowDown /></el-icon>
			</el-link>
		</span>
	</zh-col>
</template>
<script lang="ts" setup name="zh-form-query">
import { formItemProps, itemController, itemProps } from '../lib/mapController';
// 定义属性
const props = defineProps({
	...itemProps, // 基础属性
	...formItemProps,
	//是否显示 展开收缩图标
	showAdvanced: {
		type: Boolean,
		default: true,
	},
  //是否显示重置按钮
	showReset: {
		type: Boolean,
		default: true,
	},
	modelValue: [String, Array, Boolean],
	formRef: Object,
	tableRef: Object,
	queryParam: Object,
	
});
const emit = defineEmits(['update:modelValue', 'queryClick', 'reset']);
const attrs = useAttrs();
const { value } = itemController(props, attrs.value, emit);
let golbalProps: any = inject('golbalProps', {});
//获取可编辑设置
const getDisabled = () => {
	if (props.disabled === null || props.disabled === undefined) {
		return golbalProps.disabled;
	} else {
		return props.disabled;
	}
};
const queryBtn = () => {
	emit('queryClick');
};
const clearBtn = () => {
	emit('reset');
};
const toggleAdvanced = () => {
	value.value = !value.value;
};
</script>
<style lang="scss" scoped>
.table-page-search-submitButtons {
	display: block;
	margin-bottom: 24px;
	white-space: nowrap;
}
</style>
